<template>
  <el-dialog
    :title="'选择用户【'+title+'】'"
    :visible.sync="dialogVisible"
    append-to-body
    width="80%">
    <div class="person_body">
      <div class="person_tree">
        <el-scrollbar style="height: 100%">
          <el-tree
                  :data="deptOptions"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  ref="tree"
                  default-expand-all
                  @node-click="handleNodeClick"
          />
        </el-scrollbar>
      </div>
      <div class="person_select" v-loading="loading">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px" size="mini">
          <el-form-item label="用户名称" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入用户名称"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          </el-form-item>
        </el-form>

        <el-table
          :data="userList"
          border
          height="380">
          <el-table-column label="选择" width="55">
            <template slot-scope="scope">
              <el-radio v-if="!multiple" v-model="radioUser" :label="scope.row"><i></i></el-radio>
              <el-checkbox
                v-else
                :value="isSelect(scope.row.userId)"
                @change="checkboxChange($event,scope.row)"><i></i></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="用户编号" align="center" prop="userId"/>
          <el-table-column
            prop="userName"
            label="用户名">
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            show-overflow-tooltip
            width="120">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            show-overflow-tooltip
            width="120">
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            background
            :current-page.sync="queryParams.pageNum"
            :page-size.sync="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 30, 50]"
            :total="total"
            @size-change="handleQuery"
            @current-change="handleQuery"
          />
        </div>
      </div>
      <div class="person_user">
        <div class="title">已选用户</div>
        <div class="list">
          <div v-if="multiple">
            <div class="item" v-for="item in checkUser" :key="item.userId">
              <span>{{ item.nickName }}</span>
              <i class="el-icon-close" @click="checkboxChange(false,item)"></i>
            </div>
          </div>
          <div v-else>
            <div class="item" v-if="radioUser">
              <span>{{ radioUser.nickName }}</span>
              <i class="el-icon-close" @click="radioUser=undefined"></i>
            </div>
          </div>

        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
    export default {
        props: {
            value: {
                type: [String, Number, Array],
                default() {
                    return ''
                }
            },
            multiple: {
                type: Boolean,
                default() {
                    return false
                }
            }
        },
        inject: ['deptList', 'userListApi'],
        components: {},
        data() {
            return {
                radioUser: '',
                checkUser: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                dialogVisible: false,
                loading: false,
                total: 0,
                deptOptions: [],
                queryParams: {
                    pageNum: 1,
                },
                userList: [],
            }
        },
        computed: {
            title() {
                if (this.radioUser && !this.multiple) {
                    return `${this.radioUser.nickName}(${this.radioUser.userName})`
                }
                if (this.multiple) {
                    return this.checkUser.map(x => x.nickName).join(',')
                }
                return ''
            },
        },
        watch: {},
        methods: {
            checkboxChange(val, row) {
                if (val) {
                    this.checkUser.push({
                        nickName: row.nickName,
                        userId: row.userId,
                        userName: row.userName
                    })
                } else {
                    const index = this.checkUser.findIndex(x => x.userId === row.userId)
                    if (index != -1) {
                        this.checkUser.splice(index, 1)
                    }
                }
            },
            isSelect(userId) {
                return this.checkUser.findIndex(x => x.userId == userId) != -1
            },
            /** 查询部门下拉树结构 */
            getTreeselect() {
                this.deptOptions = this.deptList()
            },
            // 节点单击事件
            handleNodeClick(data) {
                this.queryParams.deptId = data.id
                this.getList(data.id)
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.page = 1
                this.getList()
            },
            /** 查询用户列表 */
            getList() {
                this.loading = true
                this.userListApi(this.queryParams).then(response => {
                        this.userList = response.data.records.map(x=>{
                          return {
                            userId:x.workNo,
                            phone:x.phone,
                            email:x.email,
                            nickName:x.realname,
                            userName:x.username,
                          }
                        })
                        if (!this.multiple) {
                            const user = this.userList.find(x => x.userId === this.value)
                            this.radioUser = user
                        }
                        this.total = response.data.total

                    }
                ).finally(() => {
                    this.loading = false
                })
            },
            confirm() {
                if (this.multiple) {
                    this.$emit('confirm', [
                        ...this.checkUser
                    ])
                } else {
                    this.$emit('confirm', this.radioUser)
                }

                this.dialogVisible = false
            },
            show() {
                this.dialogVisible = true
                this.getTreeselect()
                this.getList()
                if (this.multiple) {
                    this.checkUser = [
                        ...this.value
                    ]
                }
            }
        },
        created() {

        },
        mounted() {

        },
    }
</script>
<style scoped lang="scss">
    .person_body {
        border: 1px solid #f5f5f5;
        height: 420px;
        display: flex;

        .person_tree {
            width: 20%;
            height: 100%;
            border-right: 1px solid #f5f5f5;
        }

        .person_select {
            padding: 5px;
            width: 60%;
            height: 100%;
            font-size: 12px;
        }

        .person_user {
            padding: 5px;
            width: 20%;
            height: 100%;
            font-size: 12px;
            border-left: 1px solid #f5f5f5;

            .title {
                font-size: 18px;
            }

            .list {
                margin-top: 10px;

                .item {
                    margin: 5px;
                    padding: 5px;
                    font-size: 14px;
                    height: 25px;
                    line-height: 25px;
                    position: relative;
                    background-color: #ecf5ff;
                    color: #409eff;
                    border: 1px solid #d9ecff;
                    border-radius: 4px;
                    white-space: nowrap;

                    .el-icon-close {
                        cursor: pointer;
                        line-height: 25px;
                        position: absolute;
                        color: #909399;
                        right: 12px;
                    }
                }
            }
        }

        .pagination-container {
            background: #fff;
            position: relative;
            height: 25px;
            margin-bottom: 10px;
            margin-top: 15px;
            padding: 10px 20px;

            .el-pagination {
                right: 0;
                position: absolute;
            }
        }
    }
</style>
